<template>
    <div class="map-wrapper">
        <!-- 地图容器 -->
        <div id="allmap" ref="mapContainer"></div>

        <!-- 加载 / 错误遮罩 -->
        <div v-if="loading" class="mask">地图加载中，请稍候…</div>
        <div v-if="error" class="mask error">{{ error }}</div>

        <!-- 控制按钮 -->
        <div v-show="!loading && !error">
            <button @click="addOverlay">添加覆盖物</button>
            <button @click="removeOverlay">删除覆盖物</button>
        </div>
    </div>
</template>

<script>
export default {
    name: 'BMapOverlay',
    data() {
        return {
            map: null,
            circle: null,
            rectangle: null,
            loading: true,
            error: null
        }
    },
    async mounted() {
        try {
            await this.loadBMapApi()
            this.initMap()
            this.createOverlays()
            this.addOverlay()
        } catch (e) {
            this.error = e.message || '地图初始化失败'
        } finally {
            this.loading = false
        }
    },
    beforeDestroy() {
        this.map && this.map.destroy && this.map.destroy()
    },
    methods: {
        /* 动态加载脚本 */
        loadBMapApi() {
            return new Promise((resolve, reject) => {
                if (window.BMapGL) return resolve()
                const script = document.createElement('script')
                script.type = 'text/javascript'
                script.src =
                    'http://api.map.baidu.com/api?type=webgl&v=1.0&ak=FvibPOTtrtCn6z91J0SNPHBQe8NdfICU'
                script.onload = () => resolve()
                script.onerror = () => reject(new Error('BMapGL 脚本加载失败'))
                document.head.appendChild(script)
            })
        },

        /* 初始化地图 */
        initMap() {
            //(116.399, 39.91)
            const point = new BMapGL.Point(115.864587, 28.689449)
            this.map = new BMapGL.Map(this.$refs.mapContainer)
            this.map.centerAndZoom(point, 10)
            this.map.addControl(new BMapGL.NavigationControl3D())
            this.map.enableScrollWheelZoom(true)
        },

        /* 创建覆盖物 */
        createOverlays() {
            const point = new BMapGL.Point(115.864587, 28.689449)
            this.circle = new BMapGL.Circle(point, 5000, {
                strokeColor: 'blue',
                strokeWeight: 2,
                strokeOpacity: 0.5
            })

            const pStart = new BMapGL.Point(115.864587, 28.689449)
            const pEnd = new BMapGL.Point(115.811187, 28.611149)
            this.rectangle = new BMapGL.Polygon(
                [
                    new BMapGL.Point(pStart.lng, pStart.lat),
                    new BMapGL.Point(pEnd.lng, pStart.lat),
                    new BMapGL.Point(pEnd.lng, pEnd.lat),
                    new BMapGL.Point(pStart.lng, pEnd.lat)
                ],
                { strokeColor: 'blue', strokeWeight: 2, strokeOpacity: 0.5 }
            )
        },

        addOverlay() {
            if (!this.map) return
            this.map.addOverlay(this.circle)
            this.map.addOverlay(this.rectangle)
        },

        removeOverlay() {
            if (!this.map) return
            this.map.clearOverlays()
        }
    }
}
</script>
  
<style scoped>
.map-wrapper {
    position: relative;
    font-family: '微软雅黑';
    width: 100%;
    height: 500px;
}

#allmap {
    width: 100%;
    height: 500px;
}

.mask {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 12px 24px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border-radius: 4px;
}

.mask.error {
    background: rgba(255, 0, 0, 0.6);
}
</style>